<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>帖子详情</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="../css/study.css">
    <style>
        /* 帖子详情页面特有样式 */
        .post-detail {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .post-header {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }
        
        .post-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            margin-right: 15px;
        }
        
        .post-info {
            flex: 1;
        }
        
        .post-author {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .post-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        
        .post-content {
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 20px;
            color: #555;
        }
        
        .post-actions {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .post-actions button {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            background-color: #f0f0f0;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        
        .post-actions button:hover {
            background-color: #e0e0e0;
        }
        
        .comments-section {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }
        
        .comments-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .comment-item {
            padding: 15px 0;
            border-bottom: 1px solid #eee;
        }
        
        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .comment-author {
            font-weight: bold;
            color: #333;
        }
        
        .comment-time {
            font-size: 12px;
            color: #999;
        }
        
        .comment-content {
            font-size: 14px;
            color: #555;
            line-height: 1.5;
        }
        
        .add-comment-section {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 4px;
        }
        
        .comment-form {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .comment-input {
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
            min-height: 80px;
        }
        
        .comment-submit {
            align-self: flex-end;
            padding: 8px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .comment-submit:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <a href="user-center.html" target="_blank">
        <img src="../svg/个人中心.svg" alt="SVG 图片" class="svg-image">
    </a>
    <header class="top-bar">
        <div class="user-icon"></div>
        <nav class="nav-bar">
            <div class="search-box"></div>
        </nav>
        <a href="user-center.html" class="text-area">个人中心</a>
    </header>
    
    <main class="main-content">
        <div class="post-detail" id="postDetail">
            <!-- 帖子内容将由JavaScript动态加载 -->
            <div class="post-header">
                <div class="post-avatar" id="postAvatar"></div>
                <div class="post-info">
                    <div class="post-author" id="postAuthor"></div>
                </div>
            </div>
            
            <h2 class="post-title" id="postTitle">加载中...</h2>
            <div class="post-content" id="postContent">加载中...</div>
            
            <div class="post-actions">
                <button id="likeButton">点赞</button>
                <button id="commentButton">评论</button>
            </div>
            
            <!-- 评论区域 -->
            <div class="comments-section">
                <h3 class="comments-title">评论 (0)</h3>
                
                <!-- 评论列表 -->
                <div class="comments-list" id="commentsList">
                    <!-- 评论将由JavaScript动态加载 -->
                </div>
                
                <!-- 添加评论区域 -->
                <div class="add-comment-section">
                    <form class="comment-form" id="commentForm">
                        <textarea class="comment-input" id="commentContent" placeholder="写下你的评论..." required></textarea>
                        <button type="submit" class="comment-submit">发布评论</button>
                    </form>
                </div>
            </div>
        </div>
    </main>
    
    <!-- 返回主页链接 -->
    <a href="main-page.html" target="_blank">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60" height="60" viewBox="0 0 60 60" fill="none" class="main-page-svg">
            <g mask="url(#mask-15_290)">
            <path d="M49.9998 20.0002L34.9998 6.85021C33.6248 5.62019 31.8497 4.94019 29.9998 4.94019C28.1498 4.94019 26.3749 5.62019 24.9998 6.85021L9.99976 20.0002C9.19989 20.7102 8.57489 21.5827 8.14978 22.5552C7.69965 23.5302 7.49976 24.5852 7.49976 25.6502L7.49976 47.5002C7.49976 49.4902 8.29962 51.3977 9.69977 52.8027C11.0996 54.2102 12.9996 55.0002 14.9998 55.0002L44.9998 55.0002C46.9998 55.0002 48.9 54.2102 50.2998 52.8027C51.7 51.3977 52.4998 49.4902 52.4998 47.5002L52.4998 25.6252C52.4998 24.5652 52.2748 23.5152 51.8498 22.5452C51.4245 21.5752 50.7995 20.7077 49.9998 20.0002L49.9998 20.0002L49.9998 20.0002ZM34.9998 50.0002L24.9998 50.0002L24.9998 37.5002C24.9998 36.8377 25.2747 36.2002 25.7249 35.7327C26.1997 35.2627 26.8247 35.0002 27.4998 35.0002L32.4998 35.0002C33.1748 35.0002 33.7998 35.2627 34.2748 35.7327C34.7248 36.2002 34.9998 36.8377 34.9998 37.5002L34.9998 50.0002L34.9998 50.0002ZM47.4998 47.5002C47.4998 48.1627 47.2248 48.8002 46.7748 49.2677C46.2998 49.7377 45.6748 50.0002 44.9998 50.0002L39.9998 50.0002L39.9998 37.5002C39.9998 35.5102 39.2 33.6027 37.7998 32.1977C36.4 30.7902 34.4998 30.0002 32.4998 30.0002L27.4998 30.0002C25.4996 30.0002 23.5996 30.7902 22.1998 32.1977C20.7996 33.6027 19.9998 35.5102 19.9998 37.5002L19.9998 50.0002L14.9998 50.0002C14.3247 50.0002 13.6997 49.7377 13.2249 49.2677C12.7747 48.8002 12.4998 48.1627 12.4998 47.5002L12.4998 25.6252C12.4998 25.2702 12.5748 24.9202 12.7247 24.5952C12.8748 24.2727 13.0747 23.9852 13.3497 23.7502L28.3497 10.6252C28.7998 10.2252 29.3998 10.0027 29.9998 10.0027C30.5997 10.0027 31.1997 10.2252 31.6498 10.6252L46.6498 23.7502C46.9248 23.9852 47.1248 24.2727 47.2748 24.5952C47.4248 24.9202 47.4998 25.2702 47.4998 25.6252L47.4998 47.5002L47.4998 47.5002Z"   fill="#000000" >
            </path>
            </g>
            <defs>
            <mask id="mask-15_290" style="mask-type:alpha" maskUnits="userSpaceOnUse">
            <rect x="0" y="0" width="60" height="60"   fill="#000000" >
            </rect>
            <rect x="0" y="0" width="60" height="60"   fill="#000000" >
            </rect>
            </mask>
            </defs>
        </svg>
    </a>
    
    <!-- 评论模态框 (备用方案) -->
    <div id="commentModal" class="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center;">
        <div class="modal-content" style="background-color: white; padding: 20px; border-radius: 5px; width: 500px; max-width: 90%;">
            <h2>发布评论</h2>
            <input type="hidden" id="commentPostId">
            <div class="form-group">
                <label for="modalCommentContent">评论内容:</label>
                <textarea id="modalCommentContent" class="form-control" rows="4" required></textarea>
            </div>
            <div class="modal-buttons" style="display: flex; justify-content: flex-end; gap: 10px; margin-top: 15px;">
                <button id="cancelComment">取消</button>
                <button id="confirmComment">确认发布</button>
            </div>
        </div>
    </div>
    
    <script src="../js/post-detail.js"></script>
    <style>
    /* 删除评论按钮样式 */
    .delete-comment-btn {
        background-color: #ff4444;
        color: white;
        border: none;
        border-radius: 4px;
        padding: 4px 8px;
        font-size: 12px;
        cursor: pointer;
        float: right;
    }
    
    .delete-comment-btn:hover {
        background-color: #cc0000;
    }
    </style>
</body>
</html>